<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!doctype html>
<html><body><div id="l1"><div id="l2"><div id="l3"><div id="l4"><div id="l5"><div id="l6">叶子</div></div></div></div></div></div>
<script>
const colors = {1:'🔽',2:'🎯',3:'🔼'};
['l1','l2','l3','l4','l5','l6'].forEach(id=>{
  const el = document.getElementById(id);
  [true,false].forEach(isCapture=>{
    el.addEventListener('click', evt=>{
      console.log(
        `%c${colors[evt.eventPhase]} %c${isCapture?'capture':'bubble'}  @${el.id}`,
        `color:${isCapture?'#00f':'#f00'}`,
        `color:#000`
      );
    }, isCapture);
  });
});
document.getElementById('l6').dispatchEvent(new Event('click',{bubbles:true}));
</script></body></html>
</body>
</html>